<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/header.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        body{
            font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        #the_big{
            margin-top: 100px;
            position: relative;
            width: 1440px;
            margin: 0 auto;
            height: 1746px;
            /*background-color: #0AA1DE;*/
        }
        #title{
            width: 100%;
            height: 48px;
            /*background-color:#CC66FF;*/
            font-size: 40px;
            text-align: center;
        }
        #big2{
            width: 100%;
            height: 1650px;
           /* background-color:yellow ;*/
            position: relative;
            margin-top: 48px;

        }
        .divs5{
            width: 35%;
            height: 418px;
            background-color: #dddddd;
            position: relative;
            left: 160px;
            top:100px;
            margin-top: 100px;

        }
        .heads5{
            width:100% ;
            height: 85px;
            background-color: black;

        }
        .box1{
            width: 59px;
            height: 55px;
            position: relative;
            margin: 15px ;
            top: 15px;
            color: white;
            border: 1px solid black;
            background-color: #ffffff;
        }
        .num{
            width: 29px;
            height: 47px;
            font-size: 35px;
            padding-left: 10px;
            color: black;
        }
        .h3_1{
            left: 85px;
            top: -55px;
            position: relative;
            color: #dddddd;
            font-size: 12.8px;
        }
        .h3_2{
            left: 85px;
            top: -65px;
            position: relative;
            color: #dddddd;
            font-size: 20.8px;
        }
        .bodys{
            position: relative;
            width:100%;
            height: 330px;
            background-color: #dddddd;
            /*margin-left: 17px;*/
            top: -15px;
            box-shadow:  15px 15px 20px  black;
        }
        .ps{
            position: relative;
            padding: 5px 15px;
        }
        .imgs{
            width: 95%;
            height: 224px;
            position: relative;
            margin-left: 12px;
            padding: 3px 0;

        }
        .divs6{
            width: 35%;
            height: 418px;
            background-color: #dddddd;
            position: relative;
            left: 760px;
            bottom:1440px;
            margin-top: 100px;
        }
        #span1{
            display: inline-block;
            position: absolute;
            width: 50%;
            height: 100%;
            border-right:2px solid black;
        }
    </style>
</head>
<body>
<div id="header">
    <img class="i1" src="../jp/捕获1.PNG" alt="">
    <div id="logo">
        <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
        </a>
            <!--            <a  class="a1" href="">HOME&nbsp;&nbsp;&nbsp;</a>-->
            <!--            <a class="a1" href="">ABOUT&nbsp;&nbsp;&nbsp;</a>-->
            <!--            <a class="a1" href="">PROJECTS&nbsp;&nbsp;&nbsp;</a>-->
            <!--            <a class="a1" href="">CONTACT</a>-->
        </h1>
    </div>
    <div id="login_reg">
        <a  href="#" @click.prevent="fn1()">退出</a>
    </div>
</div>
<div id="the_big">
    <!--标题Timeline-->
    <div id="title">Timeline</div>
    <!--第二大div-->
    <div id="big2">
        <span id="span1"></span>
        <!--左1-->
        <div class="divs5">
            <div class="heads5">
                <div class="box1">
                    <span class="num">01</span>
                </div>
                <h3 class="h3_1">2021</h3>
                <span class="h3_2">海飞丝</span>
            </div>
            <div class="bodys">
                <p class="ps">海飞丝是美国宝洁公司旗下著名的洗发露品牌，
                    1963年全球第一支含有活性去屑成分可有效去除头屑的洗发露诞生。
                    有效去除头屑成为海飞丝品牌深受全球消费者喜爱的最出色的功效。
                </p>
                <img src="倪妮.jpg" alt="" class="imgs">
            </div>
        </div>
        <!--左2-->
        <div class="divs5">
            <div class="heads5">
                <div class="box1">
                    <span class="num">02</span>
                </div>
                <h3 class="h3_1">2020</h3>
                <span class="h3_2">戴森美发直发器</span>
            </div>
            <div class="bodys">
                <p class="ps">采用柔性弹板
                    提升造型体验
                    提升造型体验。
                    使用更少热量。
                    有绳无绳随心切换。
                </p>
                <img src="弹班.JPG" alt="" class="imgs">
            </div>
        </div>
        <!--左3-->
        <div class="divs5">
            <div class="heads5">
                <div class="box1">
                    <span class="num">03</span>
                </div>
                <h3 class="h3_1">2021</h3>
                <span class="h3_2">戴森吹风机</span>
            </div>
            <div class="bodys">
                <p class="ps">Dyson Supersonic?吹风机配备新一代风嘴系列，为不同头发设计，日常造型，
                    轻松打造。强劲数码马达快速干发，智能温控技术帮助防止过热损伤。
                </p>
                <img src="吹风.JPG" alt="" class="imgs">
            </div>
        </div>
            <!--右1-->
            <div class="divs6">
                <div class="heads5">
                    <div class="box1">
                        <span class="num">04</span>
                    </div>
                    <h3 class="h3_1">2020</h3>
                    <span class="h3_2">巴黎卡诗</span>
                </div>
                <div class="bodys">
                    <p class="ps">1964年，世界顶尖专业护发品牌，巴黎卡诗KéRASTASE 在法国诞生。
                        巴黎卡诗坚持秀发护理的四个步骤：诊断、洁发、护发、韵泽
                    </p>
                    <img src="卡诗.jpg" alt="" class="imgs">
                </div>
            </div>
            <!--右二-->
            <div class="divs6">
                <div class="heads5">
                    <div class="box1">
                        <span class="num">05</span>
                    </div>
                    <h3 class="h3_1">2021</h3>
                    <span class="h3_2">戴森美发造型器</span>
                </div>
                <div class="bodys">
                    <p class="ps">卷筒用于打造卷发或波浪，发梳用于打造顺滑或蓬松效果。
                        Dyson Airwrap?美发造型器运用康达效应，
                        无需过高温度，即可完成造型。
                    </p>
                    <img src="卷发.JPG" alt="" class="imgs">
                </div>
            </div>
            <!--右三-->
            <div class="divs6">
                <div class="heads5">
                    <div class="box1">
                        <span class="num">06</span>
                    </div>
                    <h3 class="h3_1">2020</h3>
                    <span class="h3_2">多芬</span>
                </div>
                <div class="bodys">
                    <p class="ps">美容行业将近50年历史的多芬是全球著名的品牌，是联合利华最有价值的品牌之一。
                        多年来多芬一直用真人来做广告。像它的英文名字Dove一样象征着希望、快乐、和平以及所有积极事物。
                    </p>
                    <img src="多芬.jpg" alt="" class="imgs">
                </div>
            </div>
        <!---->
    </div>
    <div id="footer">
        <div class="foot_t">
            <div id="zuo_boby">
                <h2 id="ft_title">A.S Hair Salon</h2>
                <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                    Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
                </p>
                <h3>Trusted by<span style="color: orange">500+ People</span></h3>
                <img src="微信.webp" alt="" class="tubiao">
                <img src="qq.webp" alt="" class="tubiao">
            </div>
        </div>
        <div class="foot_t">
            <div id="mid_boby">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="" class="lianjie">>>&nbspHome</a></li>
                    <li><a href="" class="lianjie">>>&nbspAbout Us</a></li>
                    <li><a href="" class="lianjie">>>&nbspSingle Page</a></li>
                    <li><a href="" class="lianjie">>>&nbspTeam</a></li>
                    <li><a href="" class="lianjie">>>&nbspContact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="foot_t">
            <div id="you_boby">
                <h4>Contact Info</h4>
                <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
                <p id="id2">电话:+1(12) 123 456 789</p>
                <p id="id3">座机:+1(12) 123 456 789</p>
                <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-1.4.2.js"></script>
<script src="../js/header.js"></script>
</body>
</html>